<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>每日待办清单</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 主容器 -->
    <div class="app-container">
        <!-- 应用标题和统计信息 -->
        <header class="app-header">
            <div class="header-top">
                <h1 class="app-title">📝 每日待办清单</h1>
                <div class="version-info">
                    <span class="version-badge">v<span class="version-text"></span></span>
                    <span class="author-badge">by <span class="author-text"></span></span>
                </div>
            </div>

            <div class="stats-container">
                <div class="stat-item">
                    <span class="stat-label">总计</span>
                    <span class="stat-value" id="total-count">0</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">已完成</span>
                    <span class="stat-value completed" id="completed-count">0</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">待完成</span>
                    <span class="stat-value pending" id="pending-count">0</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">完成率</span>
                    <span class="stat-value completion_rate" id="completion_rate-count">0.0%</span>
                </div>
            </div>
        </header>

        <!-- 添加新任务区域 -->
        <section class="add-todo-section">
            <div class="add-todo-container">
                <input 
                    type="text" 
                    id="new-todo-input" 
                    class="new-todo-input" 
                    placeholder="输入新的待办事项..." 
                    maxlength="200"
                >
                <button id="add-todo-btn" class="add-todo-btn">
                    <span class="btn-icon">➕</span>
                    添加
                </button>
            </div>
        </section>

        <!-- 待办事项列表区域 -->
        <main class="todos-container">
            <!-- 未完成的任务 -->
            <section class="todo-section">
                <h2 class="section-title">
                    <span class="section-icon">⏳</span>
                    今日待完成任务
                </h2>
                <div id="pending-todos" class="todo-list">
                    <!-- 待完成的任务将在这里动态插入 -->
                </div>
            </section>

            <!-- 已完成的任务 -->
            <section class="todo-section">
                <h2 class="section-title">
                    <span class="section-icon">✅</span>
                    今日已完成任务
                </h2>
                <div id="completed-todos" class="todo-list">
                    <!-- 已完成的任务将在这里动态插入 -->
                </div>
            </section>

            <!-- 昨日的任务 -->
            <section class="todo-section">
                <h2 class="section-title">
                    <span class="section-icon">📋</span>
                    昨日任务
                </h2>
                <div id="yesterday-todos" class="todo-list">
                    <!-- 昨日的任务将在这里动态插入 -->
                </div>
            </section>
        </main>

        <!-- 空状态提示 -->
        <div id="empty-state" class="empty-state" style="display: none;">
            <div class="empty-icon">📋</div>
            <h3>还没有任何待办事项</h3>
            <p>添加你的第一个任务开始使用吧！</p>
        </div>
    </div>

    <!-- 编辑任务模态框 -->
    <div id="edit-modal" class="modal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h3>编辑任务</h3>
                <button class="modal-close" id="modal-close">×</button>
            </div>
            <div class="modal-body">
                <input 
                    type="text" 
                    id="edit-todo-input" 
                    class="edit-todo-input" 
                    placeholder="修改任务内容..."
                    maxlength="200"
                >
            </div>
            <div class="modal-footer">
                <button id="save-edit-btn" class="btn btn-primary">保存</button>
                <button id="cancel-edit-btn" class="btn btn-secondary">取消</button>
            </div>
        </div>
    </div>

    <!-- 确认删除模态框 -->
    <div id="delete-modal" class="modal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h3>确认删除</h3>
                <button class="modal-close" id="delete-modal-close">×</button>
            </div>
            <div class="modal-body">
                <p>确定要删除这个任务吗？此操作无法撤销。</p>
                <div class="delete-preview" id="delete-preview"></div>
            </div>
            <div class="modal-footer">
                <button id="confirm-delete-btn" class="btn btn-danger">删除</button>
                <button id="cancel-delete-btn" class="btn btn-secondary">取消</button>
            </div>
        </div>
    </div>

    <!-- 通知提示 -->
    <div id="notification" class="notification" style="display: none;">
        <span class="notification-text"></span>
    </div>

    <!-- 加载提示 -->
    <div id="loading" class="loading" style="display: none;">
        <div class="loading-spinner"></div>
        <span>加载中...</span>
    </div>

    <!-- JavaScript -->
    <script src="script.js"></script>
</body>
</html>

